<template>
  <div id='i' class="sunrow login">
    <div class="sogin">
      <div class="sogler">
        <img src="static/img/sun_img2.jpg">
      </div>
      <div class="sogrig">
        <div class="sldlld">
          <div class="user_zh user_bottom">
            <div class="oler">
              <img src="../../assets/img/sun_img3.png">
            </div>
            <div class="orig">
              <mt-field type="text" placeholder="请输入手机号" v-model.lazy="account"></mt-field>
            </div>
          </div>
          <div class="user_zh user_bottom">
            <div class="oler">
              <img src="../../assets/img/sun_img4.png">
            </div>
            <div class="orig">
              <mt-field type="text" placeholder="请输入密码" v-model.lazy="password"></mt-field>
            </div>
          </div>
          <div class="user_zh tishi" v-show="error">*请重新输入密码</div>
          <div class="user_button">
            <mt-button type="primary" v-bind:disabled="btn_lock" v-on:click="post_form"></mt-button>
          </div>
          <dl class="user_zh">
            <router-link to="/Forget"><dt>忘记密码</dt></router-link>
            <router-link to="/"><dd>快速注册店铺</dd></router-link>
          </dl>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  name: 'Login',
  
  data: function(){
    return {
      account: '',
      password: '',
      error: false,
      btn_lock: false,
    }
  },

  methods: {

    post_form: function(){
      
      if (this.account.trim() == '' || this.password.trim() == ''){
        Toast('密码和账号不能为空')
        return
      }

      if (!/1[1-9]\d{9}/.test(this.account.trim()))
      {
        Toast('手机号码格式错误')
        return
      }

      this.post_api()

    },

    post_api: function(){
      this.lock_btn()
      this.$api.post('login/seller_login', {
        mobile: this.account,
        password: this.password,
      }, (suc) => {
        //console.log(suc)
        this.$router.push({path: '/index'})
      }, (fal) => {
        Toast(fal.msg)
      })
      this.unlock_btn()
    },

    lock_btn: function(){
      this.btn_lock = true
    },

    unlock_btn: function(){
      this.btn_lock = false
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="css">
@import "../../assets/css/burst.css";
.sogler {width:3rem;height:3rem;background:#fff;position:fixed;top:1.55rem;border-radius:4rem;left:3.4rem;box-shadow: 0 0 .4rem #eba91f;}
.sogler img{width:80%;margin:0 auto;display:block;margin-top:.2rem;border-radius:4rem;}
.user_zh dt{float:left;font-size:.373333rem;}
.user_zh dd{float:right;color:#fca133;font-size:.373333rem;}
.tishi{color:#fc9a24;line-height:1rem;font-size:.32rem;}
.mint-button.is-disabled{opacity: unset;}
</style>
